import React, {ReactNode} from "react";
import {Input} from "antd";
import './myInput.scss'

interface IMyInputProps {
    value: string,
    onChange: (e: any) => void,
    type?: string,
    showCount?: boolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode },
    maxLength?: number,
    disabled?: boolean,
    allowClear?: boolean | { clearIcon: ReactNode },
    onClear?: () => void,
    label?: string,
    width?: number
}

const MyInput: React.FC<IMyInputProps> =
    ({
         value,
         onChange,
         type = "text",
         showCount,
         maxLength,
         disabled,
         allowClear,
         onClear,
         label,
         width = 240
     }) => {
        return <div className="myInput r-control">
            {
                label && <label>{label}</label>
            }
            <Input
                value={value}
                onChange={onChange}
                type={type}
                showCount={showCount}
                maxLength={maxLength}
                disabled={disabled}
                allowClear={allowClear}
                onClear={onClear}
                style={{width: width + 'px'}}
            >
            </Input>
        </div>
    }
export default MyInput
